<template>
	<view class="mainPage">
		<view class="head">
			<view class="tip-mod">
				<view class="tip-li">
					<view class="tip-li-icon one"></view>
					<view class="tip-li-text">已选</view>
				</view>
				<view class="tip-li">
					<view class="tip-li-icon two"></view>
					<view class="tip-li-text">可选</view>
				</view>
				<view class="tip-li">
					<view class="tip-li-icon three"></view>
					<view class="tip-li-text">不可选</view>
				</view>
			</view>
		</view>
		<view class="seatList">
			<!-- <u-radio-group
			    v-model="seat_no"
			    
			    @change="groupChange"
				iconSize="40"
			  >
			    <u-radio
				 shape="square"
			      v-for="(item, index) in list"
			      :key="index"
			      :label="item.label"
			      :name="item.id"
			      @change="radioChange"
				  :disabled="item.state==0"
				  labelColor="#333"
				  iconSize="40"
				  activeColor="#66adf0" >
				
			    </u-radio>
			  </u-radio-group> -->
			  <u-radio-group  v-model="seat_no" iconSize="40rpx">
				  <view class="box" v-for="(item,index) in all_seats" :key="index">
				  	<view class="tit">
				  		{{item.areaName}}
				  	</view>
					<view class="radio-wrap">
						<u-radio
							shape="square"
							v-for="(sItem, sIndex) in item.seatList"
							:key="sIndex"
							:label="sItem.name"
							:name="sItem.no"
							:disabled="sItem.status==0"
							labelColor="#333"
							iconSize="40rpx"
							activeColor="#66adf0" 
							@change="radioChange(item.areaName,sItem.name)"
						>
						</u-radio>
					</view>
				  </view>
				  
			      
			    </u-radio-group>
		</view>
		<view class="sure-btn" @tap="$u.throttle(confirmBtn, 500)">确定</view>
		<u-popup :show="showBox" mode="center" round="12" :closeOnClickOverlay="false" @close="showBox = false" >
			   <view class="popup-wrap">
				   <view class="title">
					我的钓位
				   </view>
				   <view class="content">
						<view class="left">
							您选择的位置是：
						</view>
						<view class="right">
							{{selectSeatName}}
						</view>
				   </view>
				   <view class="btn-wrap">
						<view class="btn btn1" @click="showBox = false">
							取消
						</view>
						<view class="btn btn2" @tap="$u.throttle(submitSeat, 500)">
							确定
						</view>
				   </view>
			   </view>
		</u-popup>
	</view>
</template>

<script>
	import { toLogin } from '@/libs/login.js';
	import { mapGetters } from 'vuex';
	import { configMap } from "@/utils";
	import { getSeatInfo, selectSeat} from '@/api/store.js';
	export default {
		computed:{
			...configMap([], mapGetters(['isLogin'])),
		},
		data() {
			return {
				showBox:false,
				errorNetwork: false,
				all_seats: [
					/* {
						areaName: "1区",
						seatList: [
							{
								name: "1号",
								no: "1",
								status: 1
							},
							{
								name: "3号",
								no: "3",
								status: 1
							},
							{
								name: "5号",
								no: "5",
								status: 1
							}
						]
					},
					{
						areaName: "比赛区",
						seatList: [
							{
								name: "1号",
								no: "7",
								status: 1
							},
							{
								name: "2号",
								no: "8",
								status: 1
							},
							{
								name: "3号",
								no: "9",
								status: 1
							},
							{
								name: "4号",
								no: "10",
								status: 1
							}
						]
					} */
				],
				list: [{
					label: "1号",
					id: "1",
					state: 1
				}, {
					label: "2号",
					id: "2",
					state: 1
				}, {
					label: "3号",
					id: "3",
					state: 0
				}, {
					label: "4号",
					id: "4",
					state: 1
				}, {
					label: "5号",
					id: "5",
					state: 1
				}, {
					label: "6号",
					id: "6",
					state: 0
				}, {
					label: "7号",
					id: "7",
					state: 1
				}, {
					label: "8号",
					id: "8",
					state: 1
				}, {
					label: "9号",
					id: "9",
					state: 0
				},{
					label: "10号",
					id: "10",
					state: 1
				},{
					label: "11号",
					id: "11",
					state: 1
				},{
					label: "12号",
					id: "12",
					state: 0
				},{
					label: "13号",
					id: "13",
					state: 1
				}],
				seat_no:"",
				selectSeatName:'',
				ticket_order_id:null,//选位ID
			}
		},
		onLoad(e) {
			if (!e.ticket_order_id) return this.$util.Tips({
				title: '缺少必要参数无法进行选号'
			}, {
				tab: 3,
				url: 1
			});
			this.ticket_order_id = e.ticket_order_id
			// 获取奖品列表
			if (this.isLogin === false) {
				toLogin()
			} else {
				this.getSeatInfoData(this.ticket_order_id)
			}
		},
		onShow() {

		},
		onHide() {

		},
		onPullDownRefresh() {

		},

		onUnload() {

		},
		methods: {
			// navTo(){
			// 	uni.switchTab({
			// 		url:'/pages/fishing/index'
			// 	})
			// },
			submitSeat(){
					// debugger
				let seat_no = this.seat_no
				let params = {
					is_lottery:false,
					seat_no
				}
				let id = this.ticket_order_id
				selectSeat(id,params).then(res=>{
					this.showBox = false
					// let obj = {
					// 	id:id
					// }
					// uni.$emit('updateSelect', obj)
					uni.setStorageSync('updateSelectId', id);
					
					
					this.$util.Tips({
						title: '选位成功'
					}, {
						tab: 1,
						url: '/pages/fishing/index'
					});
				}).catch(err=>{
					this.showBox = false
				})
				
			},
			//判断是否有位置可选
			isHaveSeat(all_seats){
				let isNull = all_seats.some(item=>{
					return item.seatList.some(item=>item.status === 1)
				})
				if(!isNull){
					uni.showModal({
						title: '温馨提示',
						content: '当前暂无位置可选，请晚点再来吧',
						cancelColor:'#549CE3',
						confirmColor:'#ffc53e',
						success: function (res) {
							if (res.confirm) {
								uni.switchTab({
									url:'/pages/fishing/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false
				}
				return isNull
			},
			//获取可用位置
			getSeatInfoData(id){
				getSeatInfo(id).then(res=>{
					console.log(res);
					let {all_seats,fishing_pic} = res.data
					this.fishing_pic = fishing_pic
					this.all_seats = all_seats
					this.isHaveSeat(all_seats)
				})
			},
			radioChange(name1,name2){
				console.log(name1);
				console.log(name2);
				this.selectSeatName = name1+name2
			},
			confirmBtn(){
				let all_seats = this.all_seats
				let isHaveSeat = this.isHaveSeat(all_seats)
				if(!isHaveSeat) return
				let seat_no = this.seat_no
				if(this.seat_no === ''){
					uni.$u.toast("请先选择钓位")
					return
				}
				this.showBox = true
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup-wrap{
		padding: 40rpx 30rpx;
		text-align: center;
		width: 580rpx;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			margin-top: 10rpx;
		}
		.content{
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			align-items: flex-end;
			.left{
				font-size: 24rpx;
				color: #6f6f6f;
			}
			.right{
				font-size: 42rpx;
				font-weight: bold;
				color: #fe8c3e;
			}
		}
		.btn-wrap{
			display: flex;
			justify-content: center;
			.btn{
				margin: 60rpx 18rpx 0;
				min-width: 190rpx;
				border-radius: 50px;
				padding: 18rpx 0;
				font-size: 26rpx;
				color: #fff;
			}
			.btn1{
				background-color: #549CE3;
			}
			.btn2{
				background-color: #ffc53e;
			}
		}
	}
	.mainPage {
		background-color: #f6f7f9;
	}
	.head {
		padding: 40rpx 30rpx;

		.tip-mod {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.tip-li {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.tip-li-icon {
					width: 30rpx;
					height: 30rpx;
					border: 2rpx solid #66adf0;
					border-radius: 6rpx;
				}

				.tip-li-text {
					font-size: 24rpx;
					margin-left: 10rpx;
				}

				.one {
					background-color: #66adf0;
				}

				.three {
					border-color: #d1e6fa;
					background-color: #d1e6fa;
				}
			}
		}
	}
	.seatList{
		width: 690rpx;
		margin-left: 30rpx;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 12px;
		min-height: 500rpx;
		.box{
			border-bottom: 6px solid #f5f5f5;
			margin-bottom: 30rpx;
			width: 100%;
			&:last-child{
				border: none;
			}
			.tit{
				font-size: 28rpx;
				font-weight: bold;
				color: #6f6f6f;
				line-height: 50rpx;
			}
			.radio-wrap{
				display: flex;
				margin-top: 30rpx;
			}
		}
	}
	
	/deep/ .u-radio__icon-wrap{
		width: 100rpx !important;
		height: 100rpx !important;
		margin-left: 0rpx !important;
		margin-right: 0rpx !important;
		border-color: #66adf0 !important;
		border-radius: 8px;
		color: #fff !important;
		
	} 
	/deep/ .u-radio-group--row{
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	/deep/ .u-radio{
		position: relative;
		margin-right: 20rpx !important;
		margin-bottom: 40rpx !important;
	}
	/deep/.u-radio__text{
		font-size: 30rpx !important;
		position: absolute;
		line-height: 100rpx !important;
		width: 100rpx;
		text-align: center;
	}
	/deep/ .u-radio__text:checked{
		color: #fff !important;
	}
	/deep/ .u-icon__icon{
		display: none !important;
	}
	.sure-btn {
		font-size: 26rpx;
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #ffc53e;
		color: #fff;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 100rpx;
		border-radius: 10rpx;
	}
	/deep/ .u-radio__icon-wrap--disabled{
		background-color: #d1e6fa !important;
		border-color: #d1e6fa !important;
	}
	
</style>